<template>
  <div class="main">
    <div class="profile">
      <image class="bg" src="/static/images/bg.png" />
      <div class="content">
        <div class="info-box">
          <div class="head-image">
            <open-data type="userAvatarUrl"></open-data>
          </div>
          <div class="info">
            <open-data type="userNickName"></open-data>
          </div>
        </div>
      </div>
    </div>
    <div class="scores">
      <text class="key">练娃天数</text>
      <text class="val">{{days}}</text>天
    </div>

    <div class="menu">
      <i-cell i-class="remind" @click="subscribe" :title="subscribed?'关闭提醒':'学习提醒'" is-link>
        <image class="select-icon" src="/static/images/notice.png" slot="icon" />
      </i-cell>
      <button open-type="share">
        <i-cell title="邀请家长" is-link>
          <image class="select-icon" src="/static/images/share.png" slot="icon" />
        </i-cell>
      </button>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
import { $Toast } from '../../../static/iview/base/index'
export default {
  data() {
    return {
      days: 1,
      extraData: {
        customData: {
          clientInfo: wx.getSystemInfoSync().model,
          osVersion: wx.getSystemInfoSync().system,
        },
      },
      subscribed: 0,
    }
  },
  methods: {
    subscribe() {
      let that = this
      let tmplIds = ['vsm3CrptKzMQBWFIuztBQiq2OlAUyQUPdX80PzgxFig']
      if (that.subscribed) {
        // 取消订阅提醒
        wx.cloud
          .callFunction({
            name: 'unsubscribe',
            data: {
              templateId: tmplIds[0],
            },
          })
          .then(() => {
            wx.showToast({
              title: '取消提醒成功',
              icon: 'success',
              duration: 2000,
            })
            that.subscribed = 0
          })
          .catch(() => {
            wx.showToast({
              title: '取消提醒失败',
              icon: 'success',
              duration: 2000,
            })
          })
        return
      }

      wx.requestSubscribeMessage({
        tmplIds: tmplIds,
        success(res) {
          if (res['vsm3CrptKzMQBWFIuztBQiq2OlAUyQUPdX80PzgxFig'] !== 'reject') {
            wx.cloud
              .callFunction({
                name: 'subscribe',
                data: {
                  templateId: tmplIds[0],
                },
              })
              .then(() => {
                that.subscribed = 1
                $Toast({
                  content: '操作成功',
                  type: 'success',
                })
              })
              .catch(() => {
                that.subscribed = 0
                $Toast({
                  content: '操作失败',
                  type: 'error',
                })
              })
          }
        },
      })
    },
  },
  onShow() {
    wx.cloud
      .callFunction({
        name: 'get_userinfo',
        data: {
          templateId: 'vsm3CrptKzMQBWFIuztBQiq2OlAUyQUPdX80PzgxFig',
        },
      })
      .then(res => {
        this.subscribed = res.result.subscribe
        this.days = res.result.days
      })
  },
  onReachBottom() {},
  onShareAppMessage() {},
  onShareTimeline() {},
  mounted() {
    wx.showShareMenu({ menus: ['shareAppMessage', 'shareTimeline'] })
  },
}
</script>

<style lang="less" scoped>
.main {
  background: #f5f5f5;
  height: 100%;
  padding: 10px;
  .profile {
    width: 100%;
    height: 240rpx;
    position: relative;
    color: #000;
    text-align: center;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .content {
      padding: 0 20px;
      position: relative;
      z-index: 10;
      .info-box {
        padding-top: 5px;
        .head-image {
          width: 108rpx;
          height: 108rpx;
          border-radius: 100%;
          margin: 8px auto 5px auto;
          overflow: hidden;
          border: 3px solid #fff;
        }
        .info {
          margin-top: 12rpx;
          color: #4a4a4a;
          margin-bottom: 4px;
          text-align: center;
        }
      }
    }
  }
  .scores {
    margin-top: 10px;
    text-align: center;
    background: #fff;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    font-size: 15px;
    .key {
      color: #4a4a4a;
    }
    .val {
      font-size: 18px;
      margin: 0 5px 0 15px;
      color: #757575;
      font-weight: bold;
    }
  }

  .menu {
    position: relative;
    z-index: 1;
    border-radius: 5px;
    margin-top: 10px;
    background: #fff;
    .select-icon {
      width: 58rpx;
      height: 58rpx;
      margin-right: 25rpx;
    }

    /deep/ .remind {
      border-bottom: 1px solid #efefef;
    }
  }
  button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    line-height: inherit;
    border-radius: 0;
    border: none;
    text-align: left;
  }
  button::after {
    border: none;
  }
}
</style>
